<script setup lang="ts">
import { ref } from 'vue';
import { Carousel } from '@/components';

interface Props {
    title?: string;
}

const props = withDefaults(defineProps<Props>(), {
    title: '人気おすすめ'
});

const recommend_list = ref([
    {
        image: '/images/delicacy/01.jpg',
        alt: 'Image 1',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/02.jpg',
        alt: 'Image 2',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/03.jpg',
        alt: 'Image 3',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/04.jpg',
        alt: 'Image 4',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/05.jpg',
        alt: 'Image 5',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/06.jpg',
        alt: 'Image 5',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/07.jpg',
        alt: 'Image 5',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    },
    {
        image: '/images/delicacy/08.jpg',
        alt: 'Image 5',
        name: 'The Royal Park Hotel Iconic Tokyo Shiodome',
        price: 31680,
        url_name: 'Booking.com',
        scroe: 4.5,
        link: 3117
    }
]);

const recommend_options = ref({
    type: 'slide',
    drag: 'free',
    perPage: 5,
    height: '339px',
    gap: '16px'
});
</script>

<template>
    <div class="border-gradient2 rounded-xl p-0.5">
        <div class="rounded-xl bg-gradient-to-r from-[#2e2e2e] via-[#2e2e2e] to-[#353535] px-5 py-4 backdrop-blur-3xl">
            <div class="mb-4 flex items-center gap-2.5">
                <img class="block h-6" src="/images/guide/recommend-logo.png" alt="" />
                <span class="text-xl">{{ title }}</span>
            </div>
            <div>
                <Carousel :slides="recommend_list" :options="recommend_options">
                    <template #slide="{ slide }">
                        <div class="h-full w-full overflow-hidden rounded-xl bg-[#8686864D] px-1.5">
                            <img :src="slide.image" :alt="slide.alt" class="h-[170px] w-full rounded-t-xl object-cover" />
                            <p class="px-3">{{ slide.name }}</p>
                            <p class="px-3">JP￥{{ slide.price }}</p>
                            <p class="px-3">{{ slide.url_name }}</p>
                            <div class="flex px-3">
                                <span>{{ slide.scroe }}</span>
                                <span>（{{ slide.link }}）</span>
                            </div>
                        </div>
                    </template>
                </Carousel>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.border-gradient2 {
    background: linear-gradient(93deg, #f3f4f5 0%, #5d6169 50%, #f3f4f5 100%);
}
</style>
